/* empty / loading */
.vx-empty{
  padding:18px;
  border:1px dashed #cbd5e1;
  border-radius:14px;
  background:#fff;
}
.vx-loading-page{
  padding:18px;
  opacity:.75;
}

/* card */
.vx-card{
  height:100%;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:14px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
}
.vx-card__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  cursor:grab;
}
.vx-card__head:active{ cursor:grabbing; }

.vx-card__title{ font-weight:700; }
.vx-card__sub{
  font-size:12px;
  opacity:.72;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vx-card__badge{
  font-size:12px;
  opacity:.8;
  padding:4px 10px;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#f8fafc;
}
.vx-card__body{
  margin-top:12px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.vx-card__loading{ opacity:.7; font-size:12px; }
.vx-card__chart{ flex:1; min-height:120px; }
.vx-card__meta{
  font-size:12px;
  opacity:.8;
}
.vx-dot{ margin:0 6px; opacity:.5; }

.vx-err{ padding:10px; border:1px dashed #fecaca; background:#fff1f2; border-radius:12px; }
.vx-err-sub{ color:#b91c1c; }

/* sparkline */
.vx-spark{ width:100%; height:100%; }
.vx-spark-grid line{ stroke:#e2e8f0; stroke-width:2; }
.vx-spark-line{ stroke:#0ea5e9; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.vx-spark-dot{ fill:#0ea5e9; stroke:#fff; stroke-width:5; }
.vx-spark-bars rect{ fill:#0ea5e9; opacity:.95; }

/* KPI mode */
.vx-kpi{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:6px;
}
.vx-kpi__value{
  font-size:28px;
  font-weight:800;
  letter-spacing:-.02em;
}
.vx-kpi__label{
  font-size:12px;
  opacity:.7;
}


.vx-builder-preview{
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  padding: 12px;
}

#widgetsPreview{
  min-height: 280px;
}

.vx-pv-card{
  height:100%;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:12px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.vx-pv-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  cursor:grab;
}

.vx-pv-title{ font-weight:700; }
.vx-pv-badge{
  font-size:12px;
  opacity:.8;
  padding:4px 10px;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#f8fafc;
}
.vx-pv-sub{
  font-size:12px;
  opacity:.72;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.grid-stack-item .grid-stack-item-content::after {
    display:none !important;
}

/* no modal: só esconde handles, não reseta o grid */
.v-modal .grid-stack .ui-resizable-handle,
.v-modal .grid-stack-item > .ui-resizable-handle{
  display:none !important;
}

  /* e por garantia, esconde handles caso o grid apareça no modal */
  .v-modal .ui-resizable-handle,
  .v-modal .grid-stack-item > .ui-resizable-handle {
    display: none !important;
  }


/* Opcional: reduz também o overlay de resize (se estiver grande) */
.grid-stack .ui-resizable-handle {
  opacity: .55;
}


/* placeholder mais discreto */
.grid-stack .grid-stack-placeholder {
  opacity: 1;
}

/* Placeholder: visual mais baixo, com margem interna (sem alterar o tamanho real do grid) */
.grid-stack .grid-stack-placeholder > .grid-stack-item-content {
  border-radius: 16px;
  background: rgba(14,165,233,.08);
  border: 2px dashed rgba(14,165,233,.25);
  box-shadow: none;

  /* ✅ “encolhe” visualmente sem mudar o gs-h */
  margin: 6px;                 /* deixa só um pouco maior */
  height: calc(100% - 12px);   /* compensa a margem */
}

/* o item do grid precisa ter altura total */
#widgetsPreview .grid-stack-item-content {
  height: 100% !important;
}

.grid-stack-item-content {
  height: 100% !important;
}

/* card ocupa tudo e vira coluna */
.vx-widget-card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* head não cresce */
.vx-widget-head{
  flex: 0 0 auto;
}

/* body cresce e permite o chart esticar */
.vx-widget-body{
  flex: 1 1 auto;
  min-height: 0; /* IMPORTANTÍSSIMO pra flex + canvas */
  display: flex;
}

/* o container do gráfico preenche o body */
.vx-widget-content{
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}



.vx-mini-row.is-selected {
  background: #eef6ff;
  border-radius: 10px;
}

.vx-pv-card.is-selected {
  outline: 2px solid #3b82f6;
  border-radius: 12px;
}

.vx-widget-card { height: 100%; display: flex; flex-direction: column; }
.vx-widget-head { flex: 0 0 auto; }
.vx-widget-body { flex: 1 1 auto; min-height: 0; }
.vx-widget-content { height: 100%; }
.vx-widget-content canvas { width: 100% !important; height: 100% !important; display: block; }